import React, { Component } from 'react'
import { TableCustomize, compareNum, openModalMessage, openSuccessModal } from '../Precision/TableCustomize'
import { Icon, Button, Drawer, Modal } from 'antd';
import { BasicLayout } from '../../../components/BasicLayout'
import AddForm from './AddForm';
import * as APIService from '../../../axios/api_yq'
const { confirm } = Modal
export default class BigExamineAssemble extends Component {
    state = {
        dataSource: [
        ],
        columns: [
            {
                title: '序号',
                dataIndex: 'number',
                width: 50,
                ellipsis: true,
                render: (text, record, index) =>
                    <div>
                        {index + 1}
                    </div>
            },
            {
                title: '类别',
                dataIndex: 'type',
                sorter: (a, b) => compareNum(a.type, b.type),
                width: 230,
                ellipsis: true,
                editable: true

            },
            {
                title: '要求项目内容',
                dataIndex: 'itemRequirement',
                sorter: (a, b) => compareNum(a.itemRequirement, b.itemRequirement),
                width: 400,
                ellipsis: true,
                editable: true,
            },
            {
                title: '备注',
                dataIndex: 'remark',
                editable: true,
                ellipsis: true,
                width: 100
            },
            {
                title: '操作',
                dataIndex: 'opts',
                render: (text, record) =>
                    <div>
                        <a onClick={() => this.delete(record)}>{'删除'}</a>
                    </div>
            },
        ],
        previewVisible: false,
        previewImage: '',
        controls: false,
        disabled: true,
        formData: {},
        drawerVisible: false,
        one: false,
        buttonLoading: false
    }
    componentDidMount() {
        this.fetch();
    }
    //初始化加载数据
    fetch = (page = 1, size = 10) => {
        this.setState({
            loading: true,
            one: false,
            drawerVisible: false,
            formData: {},
            paging: {
                pageNum: page, pageSize: size
            }
        })
        let a = { pageNum: page, pageSize: size }
        setTimeout(() => {
            this.search({ ...a })
        }, 300);
    }
    // 查询接口
    search = (paging) => {
        APIService.queryBigMachineAssemblyCourse(paging).then((item) => {
            if (item.data.code === 200) {
                this.setState({
                    loading: false,
                    dataSource: item.data.data.data
                })
                console.log('这是初始化数据', item);
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }
    //新增/编辑接口
    newOrCompile = (value) => {
        APIService.alterBigMachineAssemblyCourse(value).then((item) => {
            if (item.data.code === 200) {
                openSuccessModal(item.data.msg)
                this.handleCancel1()
                this.fetch()
            } else {
                this.setState({
                    buttonLoading: false
                })
                openModalMessage('error', item.data.msg)
            }
        })
    }
    // 单行删除
    delete = (b) => {
        const then = this
        let id = `idList= ${[b.id]}`
        confirm({
            title: '确认删除当项吗，这将影响其他数据模块?',
            onOk() {
                APIService.deleteBigMachineAssemblyCourse(id).then((item) => {
                    if (item.data.code === 200) {
                        then.fetch()
                        openSuccessModal('删除成功')
                    } else {
                        openModalMessage('error', item.data.msg)
                    }
                })
            },
            onCancel() {
            },
        })

    }
    // 新增  
    newAdd = () => {
        this.setState({
            drawerVisible: true,
            one: false,
            formData: {}
        })
    }
    // table上直接修改数据
    loadData = (value, dataSource) => {
        console.log('在表格修改数据后保存的数据:', value, dataSource);
        this.newOrCompile(value)
    }
    // 确定新增
    onHandleOk = () => {
        const { formData } = this.state
        this.formDrawer.validateFields((err, value) => {
            if (err) return
            console.log('新增数据', value);
            let formData1 = { id: formData.id, ...value }
            this.setState({
                buttonLoading: true
            }, () => {
                this.newOrCompile(formData1)
            })
        })
    }
    // 关闭新增
    handleCancel1 = () => {
        this.formDrawer && this.formDrawer.resetFields();
        this.setState({
            drawerVisible: false,
            one: false,
            formData: {},
            buttonLoading: false
        })
    }
    render() {
        const { buttonLoading, drawerVisible, formData, one, controls, columns, dataSource, loading } = this.state
        return (
            <div>
                <BasicLayout name='测量点'>
                    <TableCustomize columns={columns} dataSource={dataSource} rowkey={dataSource.key} loading={loading} allowDrafting={true} allowEditable={this.loadData} pagination={false}></TableCustomize>
                    <Button type="dashed" onClick={this.newAdd.bind(this)} style={{ width: '100%', marginTop: '10px' }}>
                        <Icon type="plus" />新增
                    </Button>
                </BasicLayout>
                <Drawer width={500} visible={drawerVisible} title={'新增'} onClose={this.handleCancel1} destroyOnClose>
                    <AddForm
                        formData={formData}
                        onOk={this.onHandleOk}
                        ref={node => (this.formDrawer = node)}
                        onClose={this.handleCancel1}
                        one={one}
                    />
                    <div
                        style={{
                            position: 'absolute',
                            right: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={this.handleCancel} style={{ marginRight: 10 }}>{'取消'}</Button>
                        <Button type="primary" onClick={this.onHandleOk} loading={buttonLoading}>
                            {'确认'}
                        </Button>
                    </div>
                </Drawer>
            </div>
        )
    }
}
